<?php
header("Content-type:text/html;charset=utf-8");
include_once 'commonDB.php';
	?>
	
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="index.css"/>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			border: 0;
		}
		
		body {
			background-color: rgb(247, 247, 247);
		}
		
		.wrap {
			width: 100%;
			height: 100%;
		}
		/*导航栏--------------------------------------------------------------*/
		
		#navigation {
			width: 100%;
			height: 50px;
			background-color: rgba(29, 29, 29, 0.9);
			position: relative;
			z-index: 1;
		}
		
		#nav {
			width: 1000px;
			height: 100%;
			margin: 0 auto;
			overflow: hidden;
		}
		
		#nav_log {
			width: 25%;
			height: 100%;
			float: left;
		}
		
		#nav_junp {
			width: 40%;
			height: 100%;
			float: left;
			overflow: hidden;
		}
		
		#nav_junp>div {
			width: 20%;
			height: 100%;
			float: left;
		}
		
		#nav_load {
			width: 35%;
			height: 100%;
			float: right;
			overflow: hidden;
		}
		
		#nav_load>div {
			width: 50%;
			height: 100%;
			float: left;
		}
		
		#grapes_hover {
			width: 100%;
			position: absolute;
			overflow: hidden;
			background-color: white;
			z-index: 3;
		}
		
		#keepout {
			width: 1000px;
			height: 200px;
			margin-left: auto;
			margin-right: auto;
			display: none;
			overflow: hidden;
		}
		
		#keepout>div {
			width: 15%;
			height: 100%;
			float: left;
			position: relative;
		}
		
		#keepout>div>a>img {
			position: absolute;
			top: 10%;
			left: 11%;
			width: 75%;
			height: 55%;
			padding: 0 20px 0 0;
			border-right: 2px solid #ccc;
		}
		/*购买---------------------------------------------*/
		
		.buy_bg {
			width: 100%;
			height: 40px;
			background-color: #ccc;
			opacity: 0.8;
			position: relative;
			z-index: 1;
			top: 0;
			left: 0;
		}
		
		.buy {
			width: 1000px;
			height: 100%;
			margin: 0 auto;
			line-height: 40px;
			overflow: hidden;
		}
		
		.buy_text1 {
			color: grey;
			float: left;
		}
		
		.buy_text2 {
			color: grey;
			font-size: 14px;
			float: right;
			cursor: pointer;
		}
		
		.buy_text3 {
			width: 100px;
			height: 30px;
			text-align: center;
			font-size: 14px;
			color: white;
			cursor: pointer;
			border-radius: 5px;
			background-color: rgb(117, 113, 206);
			float: right;
			line-height: 30px;
			margin-top: 5px;
			margin-left: 40px;
		}
		
		.buy_text3:hover {
			background-color: rgb(151, 145, 230);
		}
		/*内容----------------------------------------------*/
		/*第一页----------------------------------------------------*/
		.pic_one>img:nth-child(1) {
			width: 100%;
		}
		
		.pic_one>img:nth-child(2) {
			width: 30%;
			position: absolute;
			left: 35%;
			top: 15%;
			/*从上到下*/
			animation: pic_one 1s forwards;
		}
		/*从上到下*/
		@-webkit-keyframes pic_one {
				0% {
					opacity: 0;
					transform: translateY(-500px);
				}
				50%{
					opacity: 0;
				}
				100% {
					opacity: 1;
					transform: translateY(0);
				}
			}
		.text_big {
			margin-top: 80px;
			font-size: 80px;
			line-height: 160px;
			text-align: center;
		}
		
		.text_middle {
			font-size: 70px;
			line-height: 120px;
			text-align: center;
		}
		
		.text_small {
			font-size: 40px;
			line-height: 70px;
			text-align: center;
		}
		/*第二页---------------------------------------------*/
		.page_two {
			width: 100%;
			height: 790px;
			text-align: center;
			padding: 70px 0;
			background-color: rgb(237, 237, 237);
		}
		.pic_two{
			/*从左到右*/
			display: none;
			animation: pic_two 1s forwards;
		}
		/*从左到右*/
		@-webkit-keyframes pic_two {
				0% {
					opacity: 0;
					transform: translateX(-1000px);
				}
				100% {
					opacity: 1;
					transform: translateX(0);
				}
			}
		.page_two>img {
			/*display: none;*/
			margin-top: 70px;
			/*从右到左*/
			animation: page_two 1s forwards;
		}
		/*从右到左*/
		@-webkit-keyframes page_two {
				from {
					opacity: 0;
					transform: translateX(1000px);
				}
				to {
					opacity: 1;
					transform: translateX(0);
				}
			}
		.text_left {
			width: 900px;
			margin: 0 auto;
			/*从左到右*/
			animation: pic_two 1s forwards;
		}
		
		.learn_text {
			color: rgb(110, 64, 137);
			margin: 70px 0;
			font-size: 40px;
		}
		
		.introduce_text {
			line-height: 50px;
			font-size: 25px;
		}
		/*第三页--------------------------------------------------*/
		.page_three{
			height: 1530px;
		}
		.pic_three {
			
			margin: 50px 0;
			text-align: center;
			/*从左到右*/
			animation: pic_two 1s forwards;
		}
		
		.text_right {
			width: 900px;
			margin: 0 auto;
			overflow: hidden;
			/*从右到左*/
			animation: page_two 1s forwards;
		}
		
		.play_text {
			color: rgb(110, 64, 137);
			margin: 0 0 30px;
			font-size: 40px;
			float: right;
		}
		
		.introduce_play {
			line-height: 50px;
			font-size: 25px;
			text-align: right;
			float: right;
		}
		
		.pic_three2 {
			margin: 80px 0;
			text-align: center;
			/*从下到上*/
			animation: pic_three2 1s forwards;
		}
		/*从下到上*/
			@-webkit-keyframes pic_three2 {
				0% {
					opacity: 0;
					transform: translateY(500px);
				}
				50%{
					opacity: 0;
				}
				100% {
					opacity: 1;
					transform: translateY(0);
				}
			}
			/*第四页---------------------------------------------------*/
		.page_four {
			width: 100%;
			height: 1000px;
			background-color: rgb(237, 237, 237);
		}
		
		.four_text {
			width: 900px;
			border: 1px solid rgb(237, 237, 237);
			margin: 0 auto;
			/*从上到下*/
			animation: pic_one 1s forwards;
		}
		
		.title {
			color: rgb(110, 64, 137);
			margin: 50px 0;
			font-size: 40px;
		}
		
		.title2 {
			width: 300px;
			height: 50px;
			border: 1px dashed black;
			border-radius: 25px;
			line-height: 50px;
			text-align: center;
			font-size: 35px;
		}
		
		.content {
			margin-top: 40px;
			font-size: 28px;
			line-height: 40px;
		}
		
		.pic_four {
			margin: 80px 0;
			text-align: center;
			/*从下到上*/
			animation: pic_three2 1s forwards;
		}
		/*第五页------------------------------------------------*/
		.five_text {
			width: 900px;
			margin: 0 auto;
			/*从上到下*/
			animation: pic_one 1s forwards;
		}
		
		.five_title {
			color: rgb(110, 64, 137);
			margin: 50px 0;
			font-size: 40px;
		}
		
		.five_content {
			margin-top: 40px;
			font-size: 26px;
		}
		
		.pic_five {
			margin: 80px 0;
			text-align: center;
		}
		
		.page_six>img {
			width: 100%;
			animation: pic_six 2s forwards;
		}
			@-webkit-keyframes pic_six {
				0% {
					opacity: 0;
					
				}
				50%{
					opacity: 0.5;
				}
				100% {
					opacity: 1;
					
				}
			}
		/*页脚---------------------------------------------------*/
		
		#abyejiaoly {
			width: 100%;
			height: 220px;
			background-color: whitesmoke;
		}
		
		footer {
			width: 1000px;
			height: 100%;
			overflow: hidden;
			margin-left: auto;
			margin-right: auto;
		}
		
		#footer_left {
			width: 20%;
			height: 80%;
			float: left;
			border-bottom: 1px solid #CCCCCC;
		}
		
		#footer_middle {
			width: 60%;
			height: 80%;
			float: left;
			overflow: hidden;
			border-bottom: 1px solid #CCCCCC;
		}
		
		#footer_middle>div {
			width: 20%;
			height: 100%;
			float: left;
		}
		
		#footer_right {
			width: 20%;
			height: 80%;
			float: right;
			border-bottom: 1px solid #CCCCCC;
		}
		
		#footer_middle>div>a:hover {
			color: mediumpurple;
		}
		/*滚到头-------------------------------------*/
		.back {
			
			position: fixed;
			right: 20px;
			bottom: 20px;
		}
	</style>

	<body>
		<div class="wrap">
			<!--导航-->
			<div id="navigation">
				<!--让导航居中-->
				<div id="nav">
					<!--导航logo-->
					<div id="nav_log" class="nav_log">
						<a id="navloga" href="putou.php"><img class="nav_log_img" src="img/nav_logo.gif" /></a>
					</div>
					<div id="nav_junp" class="nav_jump">
						<!--首页-->
						<div><a id="first" href="putou.php">首页</a></div>
						<!--葡萄产品-->
						<div><a id="grapes" href="###">葡萄产品</a></div>
						<!--葡萄纬度-->
						<div><a id="latitude" href="latitude.php">葡萄纬度</a></div>
						<!--APP下载-->
						<div><a id="APPdownload" href="APP.php">APP下载</a></div>
						<!--嘉年华-->
						<div><a id="carnival" href="JNH.php">嘉年华</a></div>
					</div>
					<div id="nav_load" class="nav_load">
						<!--登陆-->
						<div><a id="load" href="denglu.php">登陆</a></div>
						<!--注册-->
						<div><a id="registered" href="zhuce2.php">注册</a></div>
					</div>
				</div>
			</div>
			<!--隐藏-->
			<div id="grapes_hover">
				<div id="keepout">
					<?php
                         $sql = "select * from putao_chanpin order by id desc limit 6";
                         $result = mysql_query($sql);
                       while ($row =mysql_fetch_assoc($result)) {
                       ?>
                       <div><a href="<?php echo $row["href"]; ?>"><img src="<?php echo $row["scr"]; ?>"/><?php echo $row["txt"]; ?></a></div>
                    
                       <?php } ?>
				</div>
			</div>
			<!--购买------------>
			<div class="buy_bg">
				<div class="buy">
					<div class="buy_text1">奇妙电路</div>
					<div class="buy_text3">立即购买</div>
					<div class="buy_text2">概述</div>
				</div>
			</div>
			<div class="middle">
				<div class="page_one">
					<div class="pic_one">
						<img src="img/dl_header_bg.png" />
						<img src="img/dl_header_img.png" />
					</div>
					<div class="text_big">葡萄探索号之奇妙电路</div>
					<div class="text_middle">串联奇思妙想</div>
					<div class="text_small">每一块电子积木都是孩子的奇思妙想<br />快用导线将它们串联成电路，发现声音和光亮<br />锻炼动手能力的同时<br />还可通过app直观看到正在流通的电流<br />让父母和孩子一起探索电路知识<br />培养创造思维，激发科学兴趣
					</div>
				</div>
				<div class="page_two">
					<div class="pic_two"><img src="img/dl_blank_info1_img1.png" /></div>

					<img src="img/dl_blank_info1_img2.png" />
				</div>
				<div class="page_three">
					<div class="text_left" style="display: none;">
						<div class="learn_text">不止学会电路知识，更要保障孩子的安全</div>
						<div class="introduce_text">电子积木采用阻燃的PC+ABS材质，拥有更佳的耐热和绝缘特性<br /> 强度要求极高的选材带来不易损坏的产品特性，不怕跌落
							<br /> 产品符合欧盟ROHS环保要求，无污染，无塑化剂，孩子可以放心使用
						</div>
					</div>
					<div class="pic_three" style="display: none;"><img src="img/info2_img.png" /></div>
					<div class="text_right" style="display: none;">
						<div class="play_text">科技让玩乐变得可靠安心</div>
						<div class="introduce_play">特别选用PTC保险丝，有效防止短路<br /> 控制电路电压在3V以内，确保远低于公认的24V安全特低电压
							<br /> 每一个电子元件末端的外置磁铁均利用异极相吸的物理原理
							<br /> 完美契合电路的正负极特性，让每一次串联并联都有绝佳体验
						</div>
					</div>
					<div class="pic_three2" style="display: none;"><img src="img/info4_img.png" /></div>
				</div>
				<div class="page_four">
					<div class="four_text" style="display: none;">
						<div class="title">电流的每一次连通都一目了然，让孩子爱上科学</div>
						<div class="title2">运用图像识别技术</div>
						<div class="content">对已联接完成的电路进行扫描后，在图像识别技术的帮助下<br /> 复杂抽象的电流变得清晰可见
						</div>
					</div>
					<div class="pic_four" style="display: none;"><img src="img/info3_con2_img.png" /></div>
				</div>
				<div class="page_five">
					<div class="five_text" style="display: none;">
						<div class="five_title">奇妙电路</div>
						<div class="five_content">在拼装过程中，各种神奇的声、光、电、磁趣味现象让孩子逐步掌握电路知识</div>

					</div>
					<div class="pic_five"><img src="img/info4_con_img.png" /></div>
				</div>
				<div class="page_six" style="display: none;"><img src="img/page6.png" /></div>

			</div>
			<!--页脚--------------------------------------->
			<div id="abyejiaoly">
				<footer>
					<div id="footer_left">

					</div>
					<div id="footer_middle">
						<div>
							<h4>订单中心</h4>
							<a href="###">售后政策</a>
							<a href="###">配送常见问题</a>
							<a href="###">支付方式</a>
							<a href="###">支付常见问题</a>
							<a href="###">购物指南</a>
						</div>
						<div>
							<h4>服务支持</h4>
							<a href="###">配送方式</a>
							<a href="###">隐私政策</a>
							<a href="###">账户常见问题</a>
							<a href="###">淘淘向右走常见问题</a>
							<a href="###">班德瑞使用常见问题</a>
						</div>
						<div>
							<h4>商务合作</h4>
							<a href="###">商务合作</a>
						</div>
						<div>
							<h4>关于葡萄</h4>
							<a href="###">关于葡萄</a>
							<a href="###">联系我们</a>
						</div>
						<div>
							<h4>关于我们</h4>
							<a href="###">葡萄纬度</a>
						</div>
					</div>
					<div id="footer_right">
						<a href="###"><img src="img/btn_consult_qq@2x.png" /></a>
						<a href="###"><h2>400-651-6161</h2></a>
					</div>
					<h6>Copyright © 2016, Shanghai Putao Technology Co., Ltd. All Rights Reserved. 上海葡萄纬度科技有限公司</h6>
					<a href="###">沪IC备15015904号-3</a>
				</footer>
			</div>
			<!--滚到头------------------------------------------------>
			<div class="back"><img src="img/gun.png"/></div>
		</div>

	</body>
	<script src="js/tween.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var grapeshover = document.querySelector("#grapes_hover");
		var grapesdiv = document.querySelector("#nav_junp>div:nth-child(2)");
		var keepout = document.querySelector("#keepout");
		var t = 0;
		var timer = null;
		//导航栏--------------------------------------------------------------------
		grapesdiv.onmouseover = function() {
			timer = setInterval(function() {
				if (t < 200) {
					t += 20;
				}
				grapeshover.style.height = t + "px";
				keepout.style.display = "block";
			}, 50)
		}
		grapesdiv.onmouseout = function() {
			clearInterval(timer);
			t = 0;
			grapeshover.style.height = t + "px";
			keepout.style.display = "none";
		}

		keepout.onmouseover = function() {
			t = 200;
			keepout.style.display = "block";
			grapeshover.style.height = t + "px";
		}
		keepout.onmouseout = function() {
				t = 0;
				keepout.style.display = "none";
				grapeshover.style.height = t + "px";
			}
			//滚轮滚到顶部
		var back = document.querySelector(".back");
		var timer = null;
		back.onclick = function() {
			// scrollTop 滚到头属性 设置为0时 滚动到顶部
			//			alert(document.body.scrollTop);
			//			document.body.scrollTop = 0;
			clearInterval(timer);
			// DTD模式下不能直接使用body
			// 使用documentElement
			var start = document.body.scrollTop || document.documentElement.scrollTop;
			//			var end = 0;
			var change = 0 - start;
			var t = 0;
			var d = 20;
			timer = setInterval(function() {
				t++;
				if (t >= d) {
					clearInterval(timer);
				}
				var speed = Tween.Back.easeOut(t, start, change, d);
				// 区分模式
				if (document.body) {
					document.body.scrollTop = speed;
				} else {
					document.docuemntElement.scrollTop = speed;
				}
			}, 30);

		}
		
		
		var buy_bg = document.querySelector(".buy_bg");
		var page_two = document.querySelector(".page_two");
		var page_three = document.querySelector(".page_three");
		var page_four = document.querySelector(".page_four");
		var pic_two = document.querySelector(".pic_two");
		var pic = document.querySelector(".page_two>img");
		var text_left = document.querySelector(".text_left");
		var text_right = document.querySelector(".text_right");
		var four_text = document.querySelector(".four_text");
		var pic_three = document.querySelector(".pic_three");
		var pic_three2 = document.querySelector(".pic_three2");
		var pic_four = document.querySelector(".pic_four");
		var page_five = document.querySelector(".page_five");
		var five_text = document.querySelector(".five_text");
		var page_six = document.querySelector(".page_six");
		$(function  () {
			$(window).scroll(function  () {
				var sclTop = $(window).scrollTop();
				if (sclTop >= 50) {
					buy_bg.style.position = "fixed";
				}else if (sclTop <= 50) {
					buy_bg.style.position = "";
				}
				var windowH = document.documentElement.clientHeight;
				var twoH = page_two.offsetTop;
				var h2 = twoH-windowH-sclTop;
				if (h2 <= -50 ) {
					pic_two.style.display = "block";
//					pic.style.display = "block";
				}
				var threeH = page_three.offsetTop;
				var h3 = threeH-windowH-sclTop;
				if (h3 <= -50 && h3 >-500) {
					text_left.style.display = "block";
				}else if (h3 <= -500 && h3 >-1000) {
					pic_three.style.display = "block";
				}else if (h3 <= -1000 && h3 >-1300) {
					text_right.style.display = "block";
				}else if (h3 <= -1300) {
					pic_three2.style.display = "block";
				}
				var fourH = page_four.offsetTop;
				var h4 = fourH-windowH-sclTop;
				if (h4 <= -100 && h4 >-500) {
					four_text.style.display = "block";
				}else if (h4 <= -500 && h4 >-1000) {
					pic_four.style.display = "block";
				}
				var fiveH = page_five.offsetTop;
				var h5 = fiveH-windowH-sclTop;
				if (h5 <= -100) {
					five_text.style.display = "block";
				}
				var sixH = page_six.offsetTop;
				var h6 = sixH-windowH-sclTop;
				if (h6 <= -100) {
					page_six.style.display = "block";
				}
				
			})
		})
		
		
	</script>

</html>